<template>
  <div class="loadingBase">
    <div class="loading">
      <ul class="balls">
        <li v-for="index in 5" :key="index"></li>
      </ul>
      <p>上传中</p>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'loadingBase',
  data () {
    return {
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../assets/stylus/index.styl'
.loadingBase
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  overflow hidden
  text-align center
  z-index 9999
  background rgba(0, 0, 0, 0.6)
  .loading
    position absolute
    top 0
    left 0
    right 0
    bottom 100px
    margin auto
    width 440px
    height 400px
    background #ffffff
    border-radius 4px
    box-sizing border-box
    padding 100px 120px
    .balls
      display flex
      justify-content center
      margin-top 50px
      li
        margin 0 4px
        width 8px
        height 8px
        border-radius 50%
        background $mainColor
        transition all 0.2s
        &:first-child
          animation bounceL 1s ease-out infinite
        &:last-child
          animation bounceR 1s ease-in infinite
          transform translate(20px, -10px)
        @keyframes bounceL
          0
            transform translate(0, 0)
          50%
            transform translate(-20px, -10px)
          100%
            transform translate(0, 0)
        @keyframes bounceR
          0
            transform translate(20px, -10px)
          50%
            transform translate(0, 0)
          100%
            transform translate(20px, -10px)
    p
      margin-top 100px
      fontSize($fontSize-l, 30px, $fontColor)
</style>
